<script>
    let enlarge1Obj = document.querySelector('.enlarge1')


    let enlarge1ImgObj = enlarge1Obj.querySelector('.img')
    let maskObj = enlarge1Obj.querySelector('.mask')
    let enlargeObj = enlarge1Obj.querySelector('.enlarge')
    enlarge1ImgObj.onmousemove = function(evt) {
        let e = evt || window.event

        let x = e.pageX - enlarge1Obj.offsetLeft - maskObj.offsetWidth / 2
        let y = e.pageY - enlarge1Obj.offsetTop - maskObj.offsetHeight / 2
        if (x < 0) x = 0
        if (y < 0) y = 0

        let maxLeft = enlarge1Obj.clientWidth - maskObj.offsetWidth
        let maxTop = enlarge1Obj.clientHeight - maskObj.offsetHeight
        if (x > maxLeft) x = maxLeft
        if (y > maxTop) y = maxTop


        maskObj.style.left = x + 'px'
        maskObj.style.top = y + 'px'

        enlargeObj.style.backgroundPosition = `-${x*2}px -${y*2}px`

    }
</script>